<template>
  <div class="container">
    <div class="row justify-content-center mt-5 pt-5">
      <div class="col-md-8 col-lg-7">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
              <img
                src="https://placeholder.pics/svg/150x50/DEDEDE/555555/智慧护理"
                alt="智慧护理"
                height="40"
                class="mb-3"
              />
              <h2 class="fw-bold">欢迎回来，{{ username }}！</h2>
              <p class="text-muted">您已成功登录智慧护理培训系统</p>
            </div>

            <div class="text-center my-4">
              <p>您可以开始学习课程、参加考核或查看培训计划。</p>
            </div>

            <div class="d-grid gap-3">
              <router-link
                to="/student/course-list"
                class="btn btn-primary btn-lg"
              >
                <i class="bi bi-laptop me-2"></i> 进入学习中心
              </router-link>
              <router-link
                to="/student/assessment"
                class="btn btn-outline-primary btn-lg"
              >
                <i class="bi bi-clipboard-check me-2"></i> 开始考核评估
              </router-link>
              <router-link
                to="/student/training-plan"
                class="btn btn-outline-primary btn-lg"
              >
                <i class="bi bi-briefcase me-2"></i> 查看培养计划
              </router-link>
            </div>

            <div class="mt-5 text-center">
              <button
                @click="logout"
                class="btn btn-link text-decoration-none text-danger"
              >
                <i class="bi bi-box-arrow-left"></i> 退出登录
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from '@/stores/user.js';
const userStore = useUserStore();
const router = useRouter();

// 假设从登录页面传递了用户名
const username = ref(router.currentRoute.value.query.username || "用户");

const logout = () => {
  userStore.logout();
};
</script>

<style scoped></style>
